<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

import unitServiceApi from '/@/api/org/bean/unit';
import { SelectOptionKeyType } from '@whjxtech/jxtech-component';

export default defineComponent({
  name: 'OrgUnitSelect',
});
</script>
<script lang="ts" setup>
const emit = defineEmits<{
  (e: 'update:value', value: string | Array<any> | undefined): void;
  (e: 'changeValue', value: any): void; //变化事件，返回dataList中item
}>();
const props = defineProps({
  /**
   * 部门id
   */
  value: {
    type: [String, Array],
  },

  placeholder: {
    type: String,
    default: '请选择部门',
  },
  // 是否能输入过滤
  filterable: {
    type: Boolean,
    default: false,
  },
  // 是否能清除
  clearable: {
    type: Boolean,
    default: true,
  },
});

//设置双向绑定
const modelValue = ref(props.value);
watch(
  () => modelValue.value,
  (val) => {
    emit('update:value', val);
  }
);
watch(
  () => props.value,
  (val) => {
    modelValue.value = val;
  }
);

/**
 * 数据字典类型
 */
const selectValueType: SelectOptionKeyType = {
  labelKey: 'unitName',
  valueKey: 'unitId',
};
const loadData = () => unitServiceApi.queryList({ orderBy: 'order by unit_type, unit_code' });
const changeValue = (item: any) => emit('changeValue', item);
</script>

<template>
  <jxtech-remote-select
    style="width: 100%"
    :load-data="loadData"
    v-model:value="modelValue"
    :placeholder="placeholder"
    :selectValueType="selectValueType"
    :filterable="filterable"
    :clearable="clearable"
    @changeValue="changeValue"
  ></jxtech-remote-select>
</template>
